<template>
  <div style="margin-top: 10px">
    <h1 style="text-align: center; font-size: 48px">{{ '欢迎你!' + user.name }}</h1>
    <el-descriptions title="个人中心" size="large" :column="2" border>
      <el-descriptions-item>
        <template #label
          ><el-icon class="icon"> <user /> </el-icon>账号</template
        >{{ user.account }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label
          ><el-icon class="icon"> <iphone /> </el-icon>电话</template
        >{{ user.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label
          ><el-icon class="icon"><Location /></el-icon>性别
        </template>
        <el-icon><Female v-show="user.sex == '0'" /><Male v-show="user.sex == '1'" /></el-icon>
        {{ user.sex == '1' ? '男' : '女' }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label
          ><el-icon class="icon"><Tickets /></el-icon>角色</template
        ><el-tag type="success" disable-transitions>{{
          user.roleId == 0 ? '超级管理员' : user.roleId == 1 ? '管理员' : '用户'
        }}</el-tag>
      </el-descriptions-item></el-descriptions
    ><DateUtils style="margin-top: 20px"></DateUtils>
  </div>
</template>
<script>
import DateUtils from './DateUtils';
import { Iphone, Location, OfficeBuilding, Tickets, User } from '@element-plus/icons-vue';
export default {
  name: '',
  components: { DateUtils, User },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('User')),
    };
  },
  computed: {},
};
</script>
<style>
.icon {
  margin-right: 10px;
  vertical-align: middle;
}
</style>
